<template>
  <div class="app-page call-content">
    <el-tabs
      v-if="editableTabs.length > 0"
      v-model="editableTabsValue"
      type="card"
      closable
      @tab-remove="removeTab"
      @tab-click="selectedTab"
    >
      <el-tab-pane
        v-for="ele in editableTabs"
        :key="ele.name"
        :label="ele.title"
        :name="ele.name"
      >
        <callOrderAdd
          :current-phone-data="ele"
          :call-date="ele.content.time"
          :call-num="ele.content.num"
          :editable-tabs-value="editableTabsValue"
        />
      </el-tab-pane>
    </el-tabs>
    <div v-else>
      <callOrderAdd />
    </div>
  </div>
</template>

<script>
  import store from '@/store'
  import dayjs from 'dayjs'
  import { mapGetters } from 'vuex'
  import callOrderAdd from './components/callOrder'
  export default {
    name: 'phoneOrder',
    components: {
      callOrderAdd
    },
    data() {
      return {
        editableTabsValue: '1',
        editableTabs: []
      }
    },
    computed: {
      ...mapGetters(['PBXData'])
    },
    watch: {
      PBXData: function(val) {
        this.tabsChange(val)
      },
      deep: true
    },
    created() {
      if (this.PBXData) {
        this.tabsChange(this.PBXData)
      }
    },
    methods: {
      selectedTab(val) {},

      tabsChange(val) {
        if (val && val.length > 0) {
          val.forEach(item => {
            const isExistIndex = this.editableTabs.findIndex(
              ele => ele.name === item.p5
            )
            if (isExistIndex === -1) {
              this.addTab(item)
            } else if (item.done) {
              this.editableTabs.splice(isExistIndex, 1)
              store.state.app.PBXData = store.state.app.PBXData.filter(
                item => !item.done
              )
            }
          })
        }
        if (this.editableTabs.length > 0) {
          this.editableTabsValue = this.editableTabs[
            this.editableTabs.length - 1
          ].name
        }
      },

      addTab(val) {
        this.editableTabs.push({
          title: val.p5,
          name: val.p5,
          content: {
            num: val.waitNum || 0,
            time:
              val.p9 && val.p9.callin_time
                ? dayjs(val.p9.callin_time).format('YYYY-MM-DD HH:mm:ss')
                : dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
          },
          ...val
        })
      },
      removeTab(targetName) {
        const tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }

        this.editableTabsValue = activeName
        const pbxList = store.state.app.PBXData
        const activeIndex = pbxList.findIndex(item => item.p5 === targetName)
        store.state.app.PBXData[activeIndex] = {
          p5: targetName,
          done: true
        }
        this.tabsChange(this.PBXData)
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  height: 100%;
  padding-bottom: 1px;
  overflow-x: hidden;
  overflow-y: auto;
  background: 0;
  .el-tabs {
    & /deep/ .el-tabs__header {
      background-color: #fff;
    }
    .el-pagination {
      white-space: normal;
    }
  }
  .phone-search {
    padding: 18px 32px 0 32px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .el-card {
    border-radius: 10px;
  }
  .bottom-margin {
    margin-bottom: 20px;
  }
  .shipping {
    display: flex;
    .el-input {
      min-width: 200px;
    }
  }
  .el-textarea {
    min-width: 300px;
  }
  .footer {
    text-align: center;
  }
  .client {
    display: flex;
    .client-item {
      div {
        margin-bottom: 10px;
      }
      div:nth-last-child(1) {
        margin-bottom: 0;
      }
    }
    .client-item:nth-child(1) {
      margin-right: 20px;
    }
  }
}
.call-content {
  padding: 0;
  padding-bottom: 10px;
}
</style>
